<script setup lang="ts">
import { Check } from '@element-plus/icons-vue'
import type { StepInfo } from '../types'

const props = defineProps<{
  steps: StepInfo[]
  currentStep: number
}>()
</script>

<template>
  <div class="flex justify-center items-center py-8 bg-gray-50">
    <div class="flex items-center gap-x-16">
      <div
        v-for="(step, index) in props.steps"
        :key="step.title"
        class="flex flex-col items-center relative"
      >
        <!-- 连接线 -->
        <div
          v-if="index < props.steps.length - 1"
          class="absolute top-3.5 left-8 w-16 h-0.5 bg-gray-300"
          :class="{
            'bg-blue-500': props.currentStep > index + 1
          }"
        />
        
        <!-- 步骤圆圈 -->
        <div
          class="relative z-10 w-7 h-7 rounded-full flex items-center justify-center mb-2 text-sm font-medium transition-all"
          :class="{
            'bg-blue-500 text-white': props.currentStep >= index + 1,
            'bg-gray-300 text-gray-600': props.currentStep < index + 1
          }"
        >
          <el-icon
v-if="props.currentStep > index + 1"
size="16">
            <Check />
          </el-icon>
          <span v-else>{{ index + 1 }}</span>
        </div>
        
        <!-- 步骤标题 -->
        <div 
          class="text-center"
          :class="{
            'text-blue-500 font-medium': props.currentStep === index + 1,
            'text-gray-900': props.currentStep > index + 1,
            'text-gray-400': props.currentStep < index + 1
          }"
        >
          <div class="text-sm">{{ step.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>